<template>
	<view class="u-p-30">
		<u-swiper :list="info.banner" keyName='image' indicatorMode="dot" indicator indicatorActiveColor="#FFFFFF"
			height="280rpx" radius="20rpx" @click='selectBanner' :circular="true"></u-swiper>
		<u-gap height="30rpx"></u-gap>
		<view class="u-bold u-f-32">运动项目</view>
		<u-gap height="20rpx"></u-gap>
		<view class="u-flex lineWord" >
			<view class="item u-bg-fff" v-for="(item,index) in info.hotList" style="padding-bottom: 28rpx;" @click="tonav(item.id)">
				<image :src="item.image" style="width: 335rpx;height: 280rpx;border-radius: 20rpx 20rpx 0rpx 0rpx;"></image>
				<view class="u-f-26 u-bold u-line-2" style="padding: 20rpx 29rpx 0 14rpx;">{{item.name}}</view>
				
			</view>
			
		</view>
	</view>
</template>


<script>

	export default {
		
		data() {
			return {
				show: false,
				show2: false,
				list1: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				],
				info: {},
				new_coupon:[],
				login_coupon:[],
				list:[],
				page:1,
				tabList: [],
				cate_id:0,
				network_time:{},
				currentView:''
				
			}
		},
		onShow() {

			
			this.getInfo()
			this.getList()
			
			
		},
		onReachBottom() {
			this.getList()
		},
		onPullDownRefresh() {
			this.page = 1
			this.list = []
			this.getInfo()
		
			this.getList()
		
			uni.stopPullDownRefresh()
		},
		methods: {
			
			tonav(e){
				uni.setStorageSync('project_id',e)
				uni.navigateTo({
					url:'/pages/member/center'
				})
			},
			selectBanner(e){
			
				let id = this.info.banner[e].id
				if(this.info.banner[e].url){
					uni.navigateTo({
						url:this.info.banner[e].url
					})
				}
				// uni.navigateTo({
					// url:'/pages/message/detail?id='+id
				// })
			},
			
			async getInfo() {
				let res = await uni.$u.http.post('/index/index');
				this.info = res
			},
		
			
			async getList(change_v) {
				if(this.page == -1){
					return
				}
				let res = await uni.$u.http.post('/shop/shopList', {
					page: this.page,
					is_resume:1,
					keyword:this.keyword,
					cate_id:this.cate_id
				});
				if(change_v==true){
					this.list = []
				
					
				}
				let ls = getApp().mergePage(res, this.page, this.list);
				this.list = ls.list
				this.page = ls.page
			},
		}
	}
</script>
<style lang="scss">
	page{
		background: linear-gradient( 180deg, #FFFFFF 0%, #F8F8FA 36%, #F8F8FA 100%);
	}
	.lineWord {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 20rpx;
		column-count: 2;
	
		.item {
			break-inside: avoid;
			column-gap: 20rpx;
			background-color: #FFFFFF;
		}
	}
</style>